Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Torified webview in react-native #247

Merged

Conversation

KoalaSat
Copy link
Member

@KoalaSat KoalaSat commented Sep 16, 2022

Fixes #42

We previously refactored the front-end to have a high level API client we can easily switch #242 and created a single component for avatars so static image files can be easily managed #251

This PR includes:

  • New client on the front-end that communicates with react-native.
  • Tor client on react-native that listen for requests, fetch and returns them back to webview.
  • Other fixes found related with running the front-end on Android, and closely related to HTTP requests.

image_0 (1)
Screenshot taken from an Android device, all the data is being obtained through the Tor daemon.

Issues found on Android

Details of this list: #42 (comment)

Error: Request Response Code (400): {"bad_request":"You must have a robot avatar to see the order details"}

Changes to test on Web front-end

  • Routes
  • User Gen Main Avatar
  • Translations

Remaining work for a fully functional Android app

  • Cookies
  • Communicate with clipboard
  • Websockets

Further Considerations

  • I'm not sure at all about the security risks on this command but I couldn't find a way to make the JS injection work without it.
  • There is a JavaBinder error that repeats over and over and I couldn't find a solution for it, looks like something related to the build size
    image

const injectMessage = (id: string, data: object) => {
const json = JSON.stringify(data);
webViewRef.current?.injectJavaScript(
`(function() {window.NativeRobosats.onMessageResolve(${id}, ${json});})();`,

Check warning

Code scanning / CodeQL

Improper code sanitization

[Improperly sanitized value](1) flows to here and is used to construct code.
@KoalaSat KoalaSat force-pushed the android-tor-requests branch 3 times, most recently from aff1c2e to feb3190 Compare September 19, 2022 19:14
@KoalaSat KoalaSat force-pushed the android-tor-requests branch from 1885f18 to 55358d8 Compare September 23, 2022 14:47
@KoalaSat KoalaSat force-pushed the android-tor-requests branch from d6358ca to b6bcd75 Compare September 23, 2022 15:58
smooth={true}
avatarClass=""
tooltip={t('This is your trading avatar')}
/>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I missed this one on the Refactor, should be checked on frontend

@KoalaSat KoalaSat force-pushed the android-tor-requests branch 2 times, most recently from 413b77b to 64e3463 Compare September 25, 2022 09:55
@KoalaSat KoalaSat marked this pull request as ready for review September 25, 2022 10:01
@KoalaSat KoalaSat force-pushed the android-tor-requests branch from 64e3463 to 85b0882 Compare September 25, 2022 10:03
@KoalaSat KoalaSat changed the title Android Tor Requests Torified webview in react-native Sep 25, 2022
On the fully dockerized dev environment the npm process cannot save files outside of /frontend directory. Now it can also save the builds to /mobile
return http.status === 200;
} catch {
return false;
}
Copy link
Member Author

@KoalaSat KoalaSat Sep 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Reckless-Satoshi A gentle try...catch did the job :)

@KoalaSat KoalaSat force-pushed the android-tor-requests branch from 597a2ca to 0df6ab2 Compare September 26, 2022 08:29
@Reckless-Satoshi
Copy link
Collaborator

Other than the main avatar looking different (style missing) everything else seems to work as intended in web. Ready to merge to create a pre-release with a .apk for testing.

Submit a LN invoice from a proxy wallet for 2M Sats. Thanks a lot for figuring out one of the biggest hurdles so far during the development of RoboSats! 🚀

this.baseUrl = 'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion';
this.daemon = Tor({
stopDaemonOnBackground: false,
numberConcurrentRequests: 0,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Reckless-Satoshi According to https://github.com/Sifir-io/react-native-tor/blob/ed9dc6f1c474c3aa1ae7512f7437343159a46480/src/index.tsx#L349 we are safe to set this to 0 (we are using v8) and it should resolve the error you got. I tested loading all pages and didn't get any error.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!

@KoalaSat
Copy link
Member Author

Other than the main avatar looking different (style missing) everything else seems to work as intended in web. Ready to merge to create a pre-release with a .apk for testing.

Submit a LN invoice from a proxy wallet for 2M Sats. Thanks a lot for figuring out one of the biggest hurdles so far during the development of RoboSats! 🚀

Has been fun!

@KoalaSat
Copy link
Member Author

lnbc20m1p3nx4rhpp5v8kasn3myn5k6sg8rfawtel8pj64948ch0mqr3wdx3r4zj6f738qdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5cl5f0skrxn3dmeuhn6f7q9zsaxtha3398xeh5qaqhl83q69samxs9qyyssqe4nvqxpljaaprx9uy9j8ke6yl96l9dj8w8ekf27zvht7hq2ecqkh7uyqc4rzyt67yz0utgsmnqcvwqxjx2ljfhguc3wtqluy5glu03sp2qec2w

@Reckless-Satoshi Reckless-Satoshi linked an issue Sep 28, 2022 that may be closed by this pull request
@Reckless-Satoshi
Copy link
Collaborator

lnbc20m1p3nx4rhpp5v8kasn3myn5k6sg8rfawtel8pj64948ch0mqr3wdx3r4zj6f738qdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5cl5f0skrxn3dmeuhn6f7q9zsaxtha3398xeh5qaqhl83q69samxs9qyyssqe4nvqxpljaaprx9uy9j8ke6yl96l9dj8w8ekf27zvht7hq2ecqkh7uyqc4rzyt67yz0utgsmnqcvwqxjx2ljfhguc3wtqluy5glu03sp2qec2w

3837663333336464643462343531353332346162383631326635353661313764

@Reckless-Satoshi Reckless-Satoshi merged commit d995e8f into RoboSats:android-webview-app-ts-2 Sep 28, 2022
Reckless-Satoshi added a commit that referenced this pull request Sep 28, 2022
* Add android build workflow

* Initial webview on tsx template

* Insert ReactJS app from local

* Add Android app icon by @red_purdy (#174)

* Add files via upload

* Add files via upload

* Add files via upload

* Add files via upload

* Add files via upload

* Add files via upload

Co-authored-by: RedPurdy <104675727+RedPurdy@users.noreply.github.com>

* Fix local reactjs

* Add setup guide. Bundled dev main.js

* Add react native tor

* Move Android CHANGELOG.md to /mobile

* Add torified webview in react-native (#247)

* Add android build workflow

* Android Tor Requests

* Fetching internal files (i18n)

* react-native-tor does not implement PUT

* Get Files from Tor

* Revert "Add android build workflow"

This reverts commit 340bcf8.

* Fix Rebase Removals

* External sources

* react-native-tor crashes

* Last Refactor

* Fix/revert setup guide

* Add /mobile as volume to npm-dev container

On the fully dockerized dev environment the npm process cannot save files outside of /frontend directory. Now it can also save the builds to /mobile

* Fix UsafeAlert

* Run prettier

* Run lint:fix

* Main Profile Image fix

* Remove Tor Requests limitation

Co-authored-by: Reckless_Satoshi <reckless.satoshi@protonmail.com>

Co-authored-by: RedPurdy <104675727+RedPurdy@users.noreply.github.com>
Co-authored-by: KoalaSat <yv1vtrul@duck.com>
@KoalaSat KoalaSat deleted the android-tor-requests branch November 9, 2022 09:28
@Reckless-Satoshi Reckless-Satoshi mentioned this pull request May 23, 2023
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Android/iOS app. Torified webview in react-native.
2 participants